<template>
  <div>
    <!-- 测试want组件库功能的一个小demo -->
    <button @click="toast">轻提示</button>
    <button @click="dialog">对话框</button>
    <button @click="addAge">添加age属性</button>
    <button @click="changeAge">修改age属性</button>
    <moren :msg.sync="morenmsg" :info.sync="info">
      <!-- <moren v-model="morenmsg"> -->
      <h1>我是默认插槽的值</h1>
    </moren>
    <juming>
      <!-- <template v-slot:top> -->
      <template slot="top">
        <span>这里是头部 {{ obj.name }}</span>
      </template>
      <!-- <span slot="top">这里是头部 {{ obj.name }}</span> -->
      <h5>这个没有名称 {{ obj.age ? obj.age : 0 }}</h5>
      <template v-slot:bottom>
        <div>底部的数据</div>
      </template>
    </juming>
  </div>
</template>

<script>
import moren from './components/01.默认插槽.vue'
import juming from './components/02.具名插槽.vue'
export default {
  components: {
    moren,
    juming
  },
  data () {
    return {
      morenmsg: '父组件传递给默认插槽',
      info: '多传输一个',
      obj: {
        name: 'tom'
      }
    }
  },
  computed: {},
  methods: {
    toast () {
      this.$toast('你好吗!')
      // this.$toast.success('成功啦!!')
      // this.$toast.loading('加载中!!!!!')
    },
    dialog () {
      this.$dialog
        .confirm({
          title: '友情提示',
          message: '你真的要退出网站吗?o(╥﹏╥)o'
        })
        .then(() => {
          // on confirm
          console.log('算你狠')
        })
        .catch(() => {
          // on cancel
          console.log('你真好!!')
        })
    },
    addAge () {
      // this.$set(this.obj, 'age', 18)
      this.obj = Object.assign({}, this.obj, { age: 19 })
      // this.obj.age = 18
    },
    changeAge () {
      this.obj.age = 28
    }
  }
}
</script>

<style></style>
